<template>
  <div class="qualityTreatment">
    <div class="sta_title">
      <div class="goBack" @click="save">
        <Icon type="ios-arrow-back"/>
        <span class="gb_font">返回</span></div>
      <div class="st_font">
        <span class="stf_title">{{qualityType == 0?'填写':'修改'}}质量处理项</span>
      </div>
    </div>
    <div class="content">
      <div class="con" v-for="item in lists">
        <div class="title">
          <span class="name">{{item.name}}</span>
          <span class="add" @click="add(item)">手动添加</span>
        </div>
        <div class="blocks" v-if="item.item.length > 0">
          <div class="block" v-for="val in item.item">
            <div class="delete" @click="deleteQual(val)"><Icon type="ios-close-circle" /></div>
            <div class="blo title">{{val.title}}</div>
            <div class="blo text">编码：{{val.item_num}}</div>
            <div class="blo text">原因：{{val.reason == ''?'无': val.reason}}</div>
            <div class="blo text notes">备注：{{val.notes == ''?'无':val.notes}}</div>
          </div>
        </div>
        <div class="blocks nullBlock" v-else>暂无产品编号</div>
      </div>
    </div>
    <div class="addQuality" v-if="showAddQuality">
      <addQuality :quesId="qualityId" :type="addQualityData.type" :name="addQualityData.name" @saveAdd="saveAdd"></addQuality>
    </div>
  </div>
</template>

<script>
  import cookie from 'js-cookie';
  import addQuality from '@/views/assembly/addQuality'
  export default {
    name: "qualityTreatment",
    props: ['qualityId','qualityType'],
    data() {
      return {
        lists: [],
        showAddQuality: false,
        addQualityData: {}
      }
    },
    components: {addQuality},
    created() {
      this.getInfo()
    },
    methods: {
      save() {
        let self = this
        this.$emit('save', 1)
      },
      getInfo(){
        let self = this
        this.$Loading.start();
        var str = {
          problem_id: self.qualityId,
          qualityType: self.qualityType,
          uid: cookie.get('uid'),
          loginType: cookie.get('loginType')
        };
        var strdata = this.$twjsdes.enstr(str);
        this.$http.post(this.$API_URL + '/item/qualitychoice', {alldata: strdata.alldata}).then((response) => {
          var res = this.$twjsdes.decrypt(response.data.alldata);
          self.lists = res.data.list
          this.$Loading.finish();
        }).catch(function (error) {
          this.$Modal.error({
            title: '提示',
            content: '网络连接错误，请检查后重试'
          });
          //console.log(error);
        });
      },
      add(val){
        let self = this
        self.addQualityData = val
        self.showAddQuality = true
      },
      saveAdd(val){
        let self = this
        self.showAddQuality = false
        if (val != undefined && val != null && val != ''){
          for (let i = 0; i < self.lists.length; i++){
            if (val.type == self.lists[i].type){
              self.lists[i].item.push(val)
            }
          } 
        } 
      },
      deleteQual(item){
        let self = this
        this.$Loading.start();
        var str = {
          problem_id: item.problem_id,
          quality_id: item.quality_id,
          uid: cookie.get('uid'),
          loginType: cookie.get('loginType')
        };
        var strdata = this.$twjsdes.enstr(str);
        this.$http.post(this.$API_URL + '/item/qualitydel', {alldata: strdata.alldata}).then((response) => {
          var res = this.$twjsdes.decrypt(response.data.alldata);
          self.getInfo()
          this.$Loading.finish();
        }).catch(function (error) {
          this.$Modal.error({
            title: '提示',
            content: '网络连接错误，请检查后重试'
          });
          //console.log(error);
        });
      }
    }
  }
</script>

<style scoped lang="less">
  .qualityTreatment {
    width: 79%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: fixed;
    right: 0;
    top: 0;
    opacity: 10;
    background: #f4f4f4;
    padding: 0 16px;
    box-sizing: border-box;
    .sta_title {
      display: flex;
      flex-direction: row;
      justify-content: center;
      position: relative;
      margin: 16px 0;
      width: 100%;
      height: 36px;
      line-height: 36px;
      .goBack {
        display: flex;
        flex-direction: row;
        position: absolute;
        left: 0;
        top: 0;
        cursor: pointer;
        .ivu-icon {
          font-size: 20px;
          line-height: 36px;
        }
        .gb_font {
          font-size: 17px;
          color: #666666;
          line-height: 37px;
        }
      }
      .st_font {
        display: flex;
        flex-direction: row;
        .stf_title {
          font-size: 17px;
          color: #222222;
          margin-left: 50px;
          margin-right: 50px;
        }
      }
    }
    .content{
      width: 100%;
      background: #fff;
      border-radius: 5px;
      border: 1px solid #e1e1e1;
      display: flex;
      flex-direction: column;
      .con{
        padding:  16px;
        box-sizing: border-box;
        border-bottom: 1px solid #e1e1e1;
        display: flex;
        flex-direction: column;
        .title{
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          margin-bottom: 16px;
          .name{
            font-size: 14px;
            color: #333333;
            line-height: 15px;
          }
          .add{
            font-size: 15px;
            color: #3f8fe0;
            line-height: 15px;
            cursor: pointer;
          }
        }
        .blocks{
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          .block{
            width: 200px;
            height: 138px;
            padding: 12px;
            box-sizing: border-box;
            background: #f9f9f9;
            border: 1px solid #e5e5e5;
            margin-right: 10px;
            margin-bottom: 10px;
            display: flex;
            flex-direction: column;
            position: relative;
            .blo{
              margin-bottom: 8px;
            }
            .blo:last-child{
              margin-bottom: 0;
            }
            .title{
              font-size: 15px;
              color: #222222;
            }
            .text{
              font-size: 14px;
              color: #666666;
              line-height: 14px;
            }
            .notes{
              overflow: hidden;
              display:-webkit-box;
              -webkit-box-orient:vertical;
              -webkit-line-clamp:2;
            }
            .delete{
              position: absolute;
              right: -7px;
              top: -9px;
              cursor: pointer;
              .ivu-icon{
                color: #f15c60;
                font-size: 18px;
              }
            }
          }
        }
        .nullBlock{
          font-size: 14px;
          color: #999999  ;
        }
      }
      .con:last-child{
        border-bottom: none;
      }
    }
    .addQuality{
      position: fixed;
      width: 100%;
      height: 100%;
      z-index: 7;
    }
  }
  /* 手机竖屏 */
  @media screen and (min-width: 0px) and (max-width: 820px) {
    .qualityTreatment{
      width: 100%;
      padding: 0 8px;
      .sta_title{
        margin: 8px 0;
      }
      .content{
        .con{
          padding: 8px;
          .title{
            margin-bottom: 8px;
          }
        }
      }
    }
  }
</style>